<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夏栀来信 - 地址管理</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .address-container {
            max-width: 1000px;
            margin: 30px auto;
            padding: 20px;
            display: flex;
            gap: 30px;
        }
        .address-form {
            flex: 2;
            background: #f9f9f9;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        .form-row {
            display: flex;
            gap: 15px;
        }
        .form-row .form-group {
            flex: 1;
        }
        .btn {
            background-color: #27ae60;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #2ecc71;
        }
        .address-list {
            margin-top: 30px;
        }
        .address-card {
            background: white;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 4px;
            border: 1px solid #eee;
            position: relative;
        }
        .address-card.default {
            border-color: #27ae60;
            background-color: #f0fff4;
        }
        .address-card h4 {
            margin-top: 0;
            display: flex;
            justify-content: space-between;
        }
        .address-actions {
            position: absolute;
            right: 15px;
            bottom: 15px;
        }
        .address-actions a {
            color: #3498db;
            text-decoration: none;
            margin-left: 10px;
        }
        .user-panel {
            flex: 1;
            background: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            height: fit-content;
        }
    </style>
</head>
<body>
    <!-- 头部导航（与checkout.html相同） -->
    <header>...</header>

    <main class="address-container">
        <section class="address-form">
            <h2>添加新地址</h2>
            <form id="address-form">
                <div class="form-row">
                    <div class="form-group">
                        <label for="name">收货人</label>
                        <input type="text" id="name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">手机号码</label>
                        <input type="tel" id="phone" class="form-control" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="region">省市区</label>
                    <div class="form-row">
                        <select id="province" class="form-control" required>
                            <option value="">选择省</option>
                            <!-- 省份将通过JS动态加载 -->
                        </select>
                        <select id="city" class="form-control" required>
                            <option value="">选择市</option>
                        </select>
                        <select id="district" class="form-control" required>
                            <option value="">选择区</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="detail">详细地址</label>
                    <textarea id="detail" class="form-control" rows="3" required></textarea>
                </div>
                
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="default-address"> 设为默认地址
                    </label>
                </div>
                
                <button type="submit" class="btn">保存地址</button>
            </form>
            
            <div class="address-list">
                <h3>我的地址</h3>
                <div id="addresses-container">
                    <!-- 地址将通过JS动态加载 -->
                </div>
            </div>
        </section>
        
        <section class="user-panel">
            <h3>个人中心</h3>
            <ul class="user-menu">
                <li><a href="profile.html">个人资料</a></li>
                <li><a href="orders.html">我的订单</a></li>
                <li><a href="address.html" class="active">地址管理</a></li>
                <li><a href="login.html">退出登录</a></li>
            </ul>
        </section>
    </main>

    <!-- 底部（与checkout.html相同） -->
    <footer>...</footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const addressForm = document.getElementById('address-form');
            const addressesContainer = document.getElementById('addresses-container');
            let addresses = JSON.parse(localStorage.getItem('addresses')) || [];
            
            // 初始化省市区选择器
            initRegionSelector();
            
            // 渲染地址列表
            function renderAddresses() {
                addressesContainer.innerHTML = '';
                
                if (addresses.length === 0) {
                    addressesContainer.innerHTML = '<p>暂无地址，请添加新地址</p>';
                    return;
                }
                
                addresses.forEach((address, index) => {
                    const addressCard = document.createElement('div');
                    addressCard.className = `address-card ${address.isDefault ? 'default' : ''}`;
                    addressCard.innerHTML = `
                        <h4>
                            ${address.name} ${address.phone}
                            ${address.isDefault ? '<span style="color:#27ae60;">(默认地址)</span>' : ''}
                        </h4>
                        <p>${address.province} ${address.city} ${address.district}</p>
                        <p>${address.detail}</p>
                        <div class="address-actions">
                            <a href="#" class="set-default" data-index="${index}">设为默认</a>
                            <a href="#" class="edit-address" data-index="${index}">编辑</a>
                            <a href="#" class="delete-address" data-index="${index}">删除</a>
                        </div>
                    `;
                    addressesContainer.appendChild(addressCard);
                });
                
                // 添加事件监听器
                document.querySelectorAll('.set-default').forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.preventDefault();
                        const index = this.getAttribute('data-index');
                        setDefaultAddress(index);
                    });
                });
                
                document.querySelectorAll('.delete-address').forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.preventDefault();
                        if (confirm('确定要删除这个地址吗？')) {
                            const index = this.getAttribute('data-index');
                            deleteAddress(index);
                        }
                    });
                });
            }
            
            // 设置默认地址
            function setDefaultAddress(index) {
                addresses.forEach(addr => addr.isDefault = false);
                addresses[index].isDefault = true;
                localStorage.setItem('addresses', JSON.stringify(addresses));
                localStorage.setItem('defaultAddress', JSON.stringify(addresses[index]));
                renderAddresses();
            }
            
            // 删除地址
            function deleteAddress(index) {
                addresses.splice(index, 1);
                localStorage.setItem('addresses', JSON.stringify(addresses));
                renderAddresses();
            }
            
            // 表单提交
            addressForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const newAddress = {
                    name: document.getElementById('name').value,
                    phone: document.getElementById('phone').value,
                    province: document.getElementById('province').value,
                    city: document.getElementById('city').value,
                    district: document.getElementById('district').value,
                    detail: document.getElementById('detail').value,
                    isDefault: document.getElementById('default-address').checked
                };
                
                if (newAddress.isDefault) {
                    addresses.forEach(addr => addr.isDefault = false);
                    localStorage.setItem('defaultAddress', JSON.stringify(newAddress));
                }
                
                addresses.push(newAddress);
                localStorage.setItem('addresses', JSON.stringify(addresses));
                
                this.reset();
                renderAddresses();
                alert('地址添加成功！');
            });
            
            // 初始化省市区数据（简化版）
            function initRegionSelector() {
                const provinces = ['北京市', '上海市', '广东省', '江苏省', '浙江省'];
                const cities = {
                    '北京市': ['北京市'],
                    '上海市': ['上海市'],
                    '广东省': ['广州市', '深圳市', '珠海市'],
                    '江苏省': ['南京市', '苏州市', '无锡市'],
                    '浙江省': ['杭州市', '宁波市', '温州市']
                };
                const districts = {
                    '北京市': ['东城区', '西城区', '朝阳区'],
                    '上海市': ['黄浦区', '徐汇区', '浦东新区'],
                    '广州市': ['天河区', '越秀区', '海珠区'],
                    '深圳市': ['福田区', '南山区', '罗湖区']
                };
                
                const provinceSelect = document.getElementById('province');
                const citySelect = document.getElementById('city');
                const districtSelect = document.getElementById('district');
                
                // 填充省份
                provinces.forEach(province => {
                    provinceSelect.innerHTML += `<option value="${province}">${province}</option>`;
                });
                
                // 省份变化时更新城市
                provinceSelect.addEventListener('change', function() {
                    citySelect.innerHTML = '<option value="">选择市</option>';
                    districtSelect.innerHTML = '<option value="">选择区</option>';
                    
                    if (this.value && cities[this.value]) {
                        cities[this.value].forEach(city => {
                            citySelect.innerHTML += `<option value="${city}">${city}</option>`;
                        });
                    }
                });
                
                // 城市变化时更新区县
                citySelect.addEventListener('change', function() {
                    districtSelect.innerHTML = '<option value="">选择区</option>';
                    
                    if (this.value && districts[this.value]) {
                        districts[this.value].forEach(district => {
                            districtSelect.innerHTML += `<option value="${district}">${district}</option>`;
                        });
                    }
                });
            }
            
            // 初始渲染
            renderAddresses();
        });
    </script>
</body>
</html>